<script lang="ts" setup>
let pageAxios: any = inject('$axios');
const router = useRouter();
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
import UploadPageImg from '../componets/uploadImg/index.vue';
import UploadPageFiles from '../componets/uploadFiles/index.vue';
import { getCustomLocalStorage } from '@/utils/localStorage';
import { Plus } from '@element-plus/icons-vue';

const orderingList = ref([
  {
    key: '订单类型',
    value: '无',
  },
  {
    key: '订单状态',
    value: '无',
  },
  {
    key: '用户评价',
    value: '无',
  },
  {
    key: '信息类型',
    value: '无',
  },
  {
    key: '是否付费',
    value: '无',
  },
  {
    key: '付费金额',
    value: '无',
  },
]);
// 记录
const manualList = ref([]);

/**
 * 查看备注
 */
const dialogRemarkOpitons = reactive({
  dialogShow: false,
  title: '查看备注',
  width: '45%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '关 闭',
      btnLoading: false,
      btnLoadingText: '',
    },
  },
});
const handelRemark = () => {
  dialogRemarkOpitons.dialogShow = true;
};
const handelDialogRemarkButton = () => {
  dialogRemarkOpitons.dialogShow = false;
};

/**
 * 驳回
 */
const dialogRejectOpitons = reactive({
  dialogShow: false,
  title: '驳回',
  width: '45%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '取 消',
      btnLoading: false,
      btnLoadingText: '',
    },
    success: {
      type: 'success',
      buttonType: 'primary',
      btnText: '提 交',
      btnLoading: false,
      btnLoadingText: '提交中',
    },
  },
});
const formRejectOptions = reactive({
  labelWidth: '0px',
  labelPosition: 'left',
});
const formReject: any = ref({
  remark: '',
});
const formRef = ref();
const rulesReject = reactive({
  remark: [
    {
      required: true,
      validator: async (rule: any, value: any, callback: any) => {
        if (!value) return callback(new Error('请填写驳回原因'));
        if (value.length > 120) return callback(new Error('最长120个字符'));
        callback();
      },
      trigger: ['blur'],
    },
  ],
});
const handelReject = () => {
  dialogRejectOpitons.dialogShow = true;
};
const handelDialogRejectButton = (item) => {
  if (item.type == 'cancel') dialogRejectOpitons.dialogShow = false;
  if (item.type == 'success') handleRejectSuccess('success');
};
const handleRejectSuccess = (type) => {
  formRef.value.validateForm(async (valid) => {
    if (valid) {
      dialogRejectOpitons.footButtonList[type].btnLoading = true;
      let res = await pageAxios.getTaskHandle({
        id: jumpParams.value.id,
        style: 4,
        keyword: formReject.value.remark,
      });
      dialogRejectOpitons.footButtonList[type].btnLoading = false;
      if (res.data.code != 200)
        return ElMessage({
          message: res.data.message,
          type: 'error',
        });
      ElMessage({ type: 'success', message: `操作成功` });
      dialogRejectOpitons.dialogShow = false;
      router.push({
        path: '/home/task',
      });
    }
  });
};

// 流转记录
const getTaskLogsMet = async () => {
  let res = await pageAxios.getTaskLogs({
    id: jumpParams.value.id,
  });
  manualList.value = res.data.data;
};

/**
 * 复制联系
 */
const handelCopy = async () => {
  if (!jumpParams.value.nickname)
    return ElMessage.warning('暂无信息可复制！');
  let str = `微信昵称：${jumpParams.value.nickname}`
  if (jumpParams.value.number) {
    str += `   微信号：${jumpParams.value.number}`
  }
  await toClipboard(str);
  ElMessage.success('复制成功！');
};

/**
 * handelEdit 编辑
 */
const handelEdit = async () => {
  console.log(inputList.value);
  let params = {
    user_id: JSON.parse(getCustomLocalStorage('userInfo')).id,
  };
  params['question_info'] = inputList.value.map((item) => {
    let obj = {};
    obj['bank_id'] = jumpParams.value.rpc_id ? item.clone_bank_id : item.id;
    obj['content'] = item.content || '';
    obj['option_id'] = item.option_id || '';
    obj['file'] = jumpParams.value.rpc_id ? item.file || '' : [item.url || ''];
    return obj;
  });
  let res = null;
  if (jumpParams.value.rpc_id) {
    params['record_id'] = jumpParams.value.rpc_id;
    res = await pageAxios.getAdminRecordUpdate(params);
  } else {
    params['clone_que_id'] = jumpParams.value.que_id;
    params['task_id'] = jumpParams.value.id;
    res = await pageAxios.getAdminRecordAdd(params);
  }
  console.log(res);
  if (res.data.code != 0)
    return ElMessage({
      message: res.data.msg,
      type: 'error',
    });
  ElMessage({ type: 'success', message: `操作成功` });
  router.push({
    path: '/home/task',
  });
};

// 上传图片成功
const handleUploadSuccess = (fileImg, editIndex) => {
  if (!fileImg.data) return;
  if (jumpParams.value.rpc_id) {
    // 标准
    inputList.value[editIndex].file[0] = `${import.meta.env.VITE_BASE_URL}/${fileImg.data.file
      }`;
  } else {
    // 快捷
    inputList.value[editIndex].url = `${import.meta.env.VITE_BASE_URL}/${fileImg.data.file
      }`;
  }
};
// 上传文件成功
const handleFileSuccess = (fileFile, editIndex) => {
  if (jumpParams.value.rpc_id) {
    // 标准
    inputList.value[editIndex].file[0] = `${import.meta.env.VITE_BASE_URL}/${fileFile.data.file
      }`;
  } else {
    // 快捷
    inputList.value[editIndex].url = `${import.meta.env.VITE_BASE_URL}/${fileFile.data.file
      }`;
  }
};
// 处理地区数据
const dealCityDate = (city) => {
  return city.join('.');
};

/**
 * 添加标签 handelAddLabel
 */
const dialogLabelOpitons = reactive({
  dialogShow: false,
  title: '添加标签',
  width: '45%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '取 消',
      btnLoading: false,
      btnLoadingText: '',
    },
    success: {
      type: 'success',
      buttonType: 'primary',
      btnText: '提 交',
      btnLoading: false,
      btnLoadingText: '提交中',
    },
  },
});
const formLabelOptions = reactive({
  labelWidth: '80px',
  labelPosition: 'left',
});
const formLabel: any = ref({
  labelName: '',
});
const formLabelRef = ref();
const rulesLabel = reactive({
  labelName: [
    {
      required: true,
      validator: async (rule: any, value: any, callback: any) => {
        if (!value) return callback(new Error('请选择标签名称'));
        callback();
      },
      trigger: ['blur'],
    },
  ],
});
const labelOptions = ref();
const dealIndex = ref();
const handelAddLabel = async (index) => {
  dealIndex.value = index;
  const res = await pageAxios.getTagUpdate({
    cat_1: jumpParams.value.cat_1,
    is_tree: 2,
  });
  if (res.data.code != 200)
    return ElMessage({
      message: res.data.message,
      type: 'error',
    });
  labelOptions.value = res.data.data.map((item) => {
    item.disabled = !item._child.length;
    return item;
  });
  formLabel.value.labelName = '';
  dialogLabelOpitons.dialogShow = true;
};
const handelDialogLabelButton = (item) => {
  if (item.type == 'cancel') dialogLabelOpitons.dialogShow = false;
  if (item.type == 'success') handleLabelSuccess();
};
const handleLabelSuccess = () => {
  formLabelRef.value.validateForm(async (valid) => {
    if (valid) {
      if (inputList.value[dealIndex.value].content == null)
        inputList.value[dealIndex.value].content = [];
      if (
        !inputList.value[dealIndex.value].content.includes(
          formLabel.value.labelName[formLabel.value.labelName.length - 1],
        )
      ) {
        inputList.value[dealIndex.value].content.push(
          formLabel.value.labelName[formLabel.value.labelName.length - 1],
        );
        ElMessage({ type: 'success', message: `添加成功` });
        dialogLabelOpitons.dialogShow = false;
      } else {
        ElMessage({ type: 'warning', message: `标签已存在，请勿重复添加！` });
      }
    }
  });
};
const handelBtnCloseLabel = (index, bIndex) => {
  inputList.value[index].content.splice(bIndex, 1);
};

/**
 * init 初始化方法入口
 */
const inputList = ref();
const loading = ref(false);
const jumpParams = ref();
const init = async () => {
  jumpParams.value = history.state.obj;
  console.log(jumpParams.value);
  // 订单类型
  orderingList.value[0].value = jumpParams.value.style == 1 ? '普通' : 'VIP';
  // 状态
  let obj = {
    0: {
      title: '支付中',
      type: 'primary',
    },
    1: {
      title: '待移交',
      type: 'primary',
    },
    2: {
      title: '已取消',
      type: 'danger',
    },
    3: {
      title: '已删除',
      type: 'danger',
    },
    4: {
      title: '已驳回',
      type: 'danger',
    },
    5: {
      title: '已通过',
      type: 'success',
    },
    6: {
      title: '已移交',
      type: 'success',
    },
    7: {
      title: 'vip待创建',
      type: 'warning',
    },
    8: {
      title: '超时',
      type: 'warning',
    },
  };
  orderingList.value[1].value = obj[jumpParams.value.status].title;
  orderingList.value[2].value = jumpParams.value.visit_appraise;
  orderingList.value[3].value = jumpParams.value.cat_1_msg;
  orderingList.value[4].value = jumpParams.value.is_pay == 1 ? '是' : '否';
  orderingList.value[5].value = jumpParams.value.pay_sum
    ? (Number(jumpParams.value.pay_num) / 100).toFixed(2) + '元'
    : '0元';
  // 日志
  getTaskLogsMet();
  // 获取表单数据
  if (jumpParams.value.rpc_id) {
    // 标准
    loading.value = true;
    let res = await pageAxios.getAdminRecordDetail({
      filling_id: jumpParams.value.rpc_id,
    });
    loading.value = false;
    inputList.value = res.data.data.record;
  } else {
    // 快捷
    if (!jumpParams.value.que_id) return;
    loading.value = true;
    let res = await pageAxios.getAdminInvestigateDetail({
      id: jumpParams.value.que_id,
      task_id: jumpParams.value.id,
    });
    loading.value = false;
    inputList.value = res.data.data?.question_info;
  }
};
init();
</script>
<template>
  <div class="taskDetail">
    <!-- 详情顶部 -->
    <div class="informationo">
      <div class="infornumber">
        <div class="weave">信息编号：{{ jumpParams?.no }}</div>
        <div class="inforbtn">
          <el-button type="primary" @click="handelRemark" :disabled="!jumpParams?.content_vip">
            查看备注
          </el-button>
          <el-button type="primary" @click="handelCopy">复制联系</el-button>
          <el-button type="danger" @click="handelReject">驳回</el-button>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="ordering">
        <div class="ordernumber" v-for="(item, index) in orderingList" :key="index">
          <span>{{ item.key }}:</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
    <div class="operate" v-loading="loading" element-loading-text="数据加载中...">
      <!-- 全部信息 -->
      <template v-if="inputList?.length">
        <div class="viewing">
          <div class="informationcont">
            <div class="informationcont_list" v-for="(item, index) in inputList" :key="index">
              <template v-if="!jumpParams.rpc_id">
                <!-- 输入框 -->
                <template v-if="item.type == 1">
                  <span class="fontwen">{{ item.name }}:</span>
                  <el-input v-model="item.content" type="text" placeholder="请输入" />
                </template>
                <!-- 单选框 -->
                <template v-if="item.type == 2">
                  <span class="fontwen">{{ item.name }}:</span>
                  <el-radio-group v-model="item.content" class="ml-4">
                    <el-radio :label="itemRadio.option_text" size="large" v-for="(itemRadio, indexRadio) in item.option"
                      :key="indexRadio">
                      {{ itemRadio.option_text }}
                    </el-radio>
                  </el-radio-group>
                </template>
                <!-- 多选框 -->
                <template v-if="item.type == 3">
                  <span class="fontwen">{{ item.name }}:</span>
                  <el-checkbox-group v-model="item.option_id">
                    <el-checkbox :label="String(itemCheckbox.id)" v-for="(itemCheckbox, indexCheckbox) in item.option"
                      :key="indexCheckbox">
                      {{ String(itemCheckbox.option_text) }}
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
                <!-- 日期 -->
                <template v-if="item.type == 4">
                  <span class="fontwen">{{ item.name }}:</span>
                  <template v-if="item.check_date == 1">
                    <el-date-picker v-model="item.content" type="datetime" placeholder="请选择"
                      value-format="YYYY-MM-DD HH:mm:ss" />
                  </template>
                  <template v-else-if="item.check_date == 2">
                    <el-date-picker v-model="item.content" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
                  </template>
                  <template v-else-if="item.check_date == 3">
                    <el-date-picker v-model="item.content" type="month" placeholder="请选择" value-format="YYYY-MM" />
                  </template>
                  <template v-else-if="item.check_date == 4">
                    <el-date-picker popper-class="picker-dateNoneYear" v-model="item.content" placeholder="请选择"
                      type="date" format="MM-DD" value-format="MM-DD" />
                  </template>
                </template>
                <!-- 时间、时长 -->
                <template v-if="item.type == 5 || item.type == 6">
                  <span class="fontwen">{{ item.name }}:</span>
                  <template v-if="item.check_date == 5">
                    <el-time-picker v-model="item.content" placeholder="请选择" value-format="HH:mm:ss" />
                  </template>
                  <template v-if="item.check_date == 6">
                    <el-time-picker v-model="item.content" placeholder="请选择" value-format="HH:mm" format="HH:mm" />
                  </template>
                  <template v-if="item.check_date == 7">
                    <el-time-picker v-model="item.content" value-format="mm:ss" format="mm:ss" :picker-options="{
          selectableRange: '00:00:00 - 00:59:59',
        }" popper-class="noneMinute" placeholder="请选择" />
                  </template>
                </template>
                <!-- 图片 -->
                <template v-if="item.type == 7">
                  <span class="fontwen">{{ item.name }}:</span>
                  <UploadPageImg @handleUploadSuccess="handleUploadSuccess" :limitCountImg="Number(1)"
                    :editIndex="index"></UploadPageImg>
                </template>
                <!-- 文件 -->
                <template v-if="item.type == 8">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.name }}:</span>
                    <UploadPageFiles @handleFileSuccess="handleFileSuccess" :limitCountFile="Number(1)"
                      :editIndex="index"></UploadPageFiles>
                  </div>
                </template>
                <!-- 地区 -->
                <template v-if="item.type == 99999996">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.name }}:</span>
                    <div class="showCity" v-for="(aItem, bIndex) in item.content" :key="bIndex">
                      <p>{{ dealCityDate(aItem) }}</p>
                    </div>
                  </div>
                </template>
                <!-- 标签 -->
                <template v-if="item.type == 99999995">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.name }}:</span>
                    <div style="width: 89%">
                      <div style="margin-bottom: 12px">
                        <el-button type="primary" :icon="Plus" @click="handelAddLabel(index)">
                          添加标签
                        </el-button>
                      </div>
                      <div class="showLabe">
                        <p v-for="(aItem, bIndex) in item.content" :key="bIndex">
                          {{ aItem }}
                          <el-icon @click="handelBtnCloseLabel(index, bIndex)">
                            <Close />
                          </el-icon>
                        </p>
                      </div>
                    </div>
                  </div>
                </template>
              </template>
              <template v-else>
                <!-- 输入框 -->
                <template v-if="item.bank_info.type == 1">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-input v-model="item.content" type="text" />
                </template>
                <!-- 单选框 -->
                <template v-if="item.bank_info.type == 2">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-radio-group v-model="item.content" class="ml-4">
                    <el-radio :label="itemRadio.option_text" size="large"
                      v-for="(itemRadio, indexRadio) in item.option_info" :key="indexRadio">
                      {{ itemRadio.option_text }}
                    </el-radio>
                  </el-radio-group>
                </template>
                <!-- 多选框 -->
                <template v-if="item.bank_info.type == 3">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-checkbox-group v-model="item.option_id">
                    <el-checkbox :label="String(itemCheckbox.id)"
                      v-for="(itemCheckbox, indexCheckbox) in item.option_info" :key="indexCheckbox">
                      {{ String(itemCheckbox.option_text) }}
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
                <!-- 日期 -->
                <template v-if="item.bank_info.type == 4">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <template v-if="item.bank_info.check_date == 1">
                    <el-date-picker v-model="item.content" type="datetime" placeholder="请选择"
                      value-format="YYYY-MM-DD HH:mm:ss" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 2">
                    <el-date-picker v-model="item.content" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 3">
                    <el-date-picker v-model="item.content" type="month" placeholder="请选择" value-format="YYYY-MM" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 4">
                    <el-date-picker popper-class="picker-dateNoneYear" v-model="item.content" placeholder="请选择"
                      type="date" format="MM-DD" value-format="MM-DD" />
                  </template>
                </template>
                <!-- 时间、时长 -->
                <template v-if="item.bank_info.type == 5 || item.bank_info.type == 6">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <template v-if="item.bank_info.check_date == 5">
                    <el-time-picker v-model="item.content" placeholder="请选择" value-format="HH:mm:ss" />
                  </template>
                  <template v-if="item.bank_info.check_date == 6">
                    <el-time-picker v-model="item.content" placeholder="请选择" value-format="HH:mm" format="HH:mm" />
                  </template>
                  <template v-if="item.bank_info.check_date == 7">
                    <el-time-picker v-model="item.content" value-format="mm:ss" format="mm:ss" :picker-options="{
          selectableRange: '00:00:00 - 00:59:59',
        }" popper-class="noneMinute" placeholder="请选择" />
                  </template>
                </template>
                <!-- 图片 -->
                <template v-if="item.bank_info.type == 7">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <UploadPageImg @handleUploadSuccess="handleUploadSuccess" :limitCountImg="Number(1)" :backUrl="item"
                    :editIndex="index"></UploadPageImg>
                </template>
                <!-- 文件 -->
                <template v-if="item.bank_info.type == 8">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.bank_info.name }}:</span>
                    <UploadPageFiles @handleFileSuccess="handleFileSuccess" :limitCountFile="Number(1)" :backFile="item"
                      :editIndex="index"></UploadPageFiles>
                  </div>
                </template>
                <!-- 地区 -->
                <template v-if="item.bank_info.type == 99999996">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.bank_info.name }}:</span>
                    <div class="showCity" v-for="(aItem, bIndex) in item.content" :key="bIndex">
                      <p>{{ dealCityDate(aItem) }}</p>
                    </div>
                  </div>
                </template>
                <!-- 标签 -->
                <template v-if="item.bank_info.type == 99999995">
                  <div style="display: flex; justify-content: start; width: 100%">
                    <span class="fontwen">{{ item.bank_info.name }}:</span>
                    <div style="width: 89%">
                      <div style="margin-bottom: 12px">
                        <el-button type="primary" :icon="Plus" @click="handelAddLabel(index)">
                          添加标签
                        </el-button>
                      </div>
                      <div class="showLabe">
                        <p v-for="(aItem, bIndex) in item.content" :key="bIndex">
                          {{ aItem }}
                          <el-icon @click="handelBtnCloseLabel(index, bIndex)">
                            <Close />
                          </el-icon>
                        </p>
                      </div>
                    </div>
                  </div>
                </template>
              </template>
            </div>
          </div>
          <div style="width: 100%; text-align: center; margin-top: 10px">
            <el-button type="primary" @click="handelEdit">保 存</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="viewing" style="text-align: center; line-height: 300px">
          暂无展示数据
        </div>
      </template>

      <!-- 操作记录 -->
      <template v-if="manualList.length">
        <div class="manual">
          <div class="pspan">操作记录</div>
          <div class="transfer">
            <div class="handover" v-for="(itempro, indexpro) in manualList" :key="indexpro">
              <span>{{ itempro.created_at }}</span>
              <div class="notes">
                <p>
                  进行
                  <span>“{{ itempro.msg }}“</span>
                  操作
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div style="text-align: center; line-height: 245px" class="manual">
          暂无操作记录
        </div>
      </template>
    </div>
    <!-- 查看备注 -->
    <Dialog :dialog-object="dialogRemarkOpitons" @handelDialogButton="handelDialogRemarkButton">
      <template v-slot:dialogContaint>
        <div v-html="jumpParams?.content_vip"></div>
      </template>
    </Dialog>
    <!-- 驳回 弹窗 -->
    <Dialog :dialog-object="dialogRejectOpitons" @handelDialogButton="handelDialogRejectButton">
      <template v-slot:dialogContaint>
        <Form :form-object="formRejectOptions" :form="formReject" :rules="rulesReject" ref="formRef">
          <template v-slot:formContaint>
            <el-form-item label="" prop="remark">
              <el-input v-model="formReject.remark" :rows="10" type="textarea" placeholder="请输入，限制120个字符" />
            </el-form-item>
          </template>
        </Form>
      </template>
    </Dialog>
    <!-- 新增标签 -->
    <Dialog :dialog-object="dialogLabelOpitons" @handelDialogButton="handelDialogLabelButton">
      <template v-slot:dialogContaint>
        <Form :form-object="formLabelOptions" :form="formLabel" :rules="rulesLabel" ref="formLabelRef">
          <template v-slot:formContaint>
            <el-form-item label="标签名称" prop="labelName">
              <el-cascader v-model="formLabel.labelName" :options="labelOptions" placeholder="请选择标签名称" :props="{
          value: 'name',
          label: 'name',
          children: '_child',
        }" />
            </el-form-item>
          </template>
        </Form>
      </template>
    </Dialog>
  </div>
</template>
<style scoped lang="scss">
.taskDetail {
  width: 100%;
  height: 101%;

  .informationo {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #3c3c3c;
    padding: 30px 20px 15px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: #3c3c3c;

    .infornumber {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #3c3c3c;

      .weave {
        font-size: 25px;
        font-weight: bold;
        color: #3c3c3c;
      }
    }

    .ordering {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #3c3c3c;

      .ordernumber {
        margin-right: 30px;
        color: #3c3c3c;

        >span:nth-child(2) {
          margin-left: 10px;
          color: #3c3c3c;
        }
      }
    }
  }

  .operate {
    display: flex;
    height: calc(100% - 120px);

    .viewing {
      width: calc(100% - 420px);
      padding: 30px 0 30px 56px;
      height: 100%;

      .informationcont {
        height: calc(100% - 20px);
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0px !important;
        }

        .informationcont_list {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          span {
            display: inline-block;
            width: 100px;
          }

          ::v-deep .el-input {
            width: 65% !important;
            height: 40px;
          }

          .showCity {
            display: flex;
            flex-wrap: wrap;

            p {
              padding: 8px;
              border: 1px solid;
              margin: 0 8px 8px 0;
              border-radius: 20px;
              font-size: 13px;
              color: #3c3c3c;
            }
          }

          .showLabe {
            display: flex;
            flex-wrap: wrap;

            p {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 8px;
              border: 1px solid #3c3c3c;
              color: #3c3c3c;
              margin: 0 8px 8px 0;
              border-radius: 20px;
              min-width: 95px;
              text-align: center;
              font-size: 13px;

              i {
                font-size: 16px;
                margin-left: 5px;
                cursor: pointer;
              }
            }
          }
        }
      }

      .fontwen {
        color: #262626;
        font-weight: 600;
      }

      .messarea,
      .labelBox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .areadata,
        .labelBoxList {
          height: 30px;
          border: 1px solid #939393;
          margin: 20px 0 0 15px;
          border-radius: 15px;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 15px;
        }
      }
    }

    .manual {
      width: 420px;
      background-color: #efefef;
      border-left: 1px solid #666666;
      padding: 30px 46px;

      .pspan {
        font-size: 24px !important;
        font-weight: bold;
      }

      .transfer {
        height: 90%;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0px !important;
        }

        .handover {
          width: 100%;
          display: flex;
          align-items: flex-start;
          margin-top: 20px;
          color: #262626;

          >span {
            white-space: nowrap;
            margin-right: 15px;
            font-size: 15px;
          }

          .notes {
            font-size: 13px;
            font-weight: 700;

            >p:nth-child(1) {
              font-size: 14px;
              margin-bottom: 10px;

              >span {
                color: #166ae0;
              }
            }
          }
        }
      }
    }
  }

  /*选择日期，年份的隐藏 */
  ::v-deep .picker-dateNoneYear {
    .el-date-picker__header {
      span:nth-child(3) {
        /*第三个标签是span的标签，把它隐藏*/
        display: none;
      }

      button:nth-child(1) {
        display: none;
      }

      button:nth-child(5) {
        display: none;
      }
    }
  }

  //这个应该是隐藏小时的代码
  ::v-deep .noneMinute {
    .el-scrollbar:nth-of-type(1) {
      display: none;
    }

    //调整样式
    .el-time-spinner {
      width: 150%;
      white-space: nowrap;
    }
  }
}
</style>
